<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>身份证认证</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .input-group{}
        .input-group li{position: relative;display: -webkit-box;display: box;height: 45px;}
        .input-group li .left{width: 100px;line-height: 45px;font-size: 14px;padding-left: 12px;color: #333;}
        .input-group li .right{box-flex: 1;-webkit-box-flex: 1;}
        .input-group li .right input{display: block;width: 100%;height: 45px;color: #666;font-size: 14px;}

        .title{font-size: 12px;color: #666;background-color: #eeedf3;padding: 4px 12px;}

        .photo{margin-top: 15px;}
        .photo .p-title{font-size: 14px;text-align: center;color: #333;}
        .photo .img{margin: 6px auto;width: 100px;height: 100px;text-align: center;line-height: 100px;border-radius: 4px;
            border: 1px solid #f0f0f0;background-size: cover;background-position: center;background-repeat: no-repeat;
            font-size: 13px;color: #666;}
        .photo .up-btn{margin: 0 auto;width: 100px;height: 40px;position: relative;overflow: hidden;}
        .photo .up-btn input{display: block;position: absolute;left: 0;top: 0;right: 0;bottom: 0;opacity: 0;width: 100%;height: 100%;}
        .photo .up-btn button{border: none;outline: none;display: block;width: 100%;height: 35px;color: #fff;background-color: #30b2fd;border-radius: 4px;font-size: 14px;}

        footer{height: 55px;}
        footer div{position: fixed;left: 0;bottom: 0;width: 100%;}
        footer button{border: none;outline: none;height: 50px;display: block;width: 100%;background-color: #ffc10c;color: #fff;text-align: center;font-size: 18px;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">身份证认证</div>
        </div>
    </header>
    <div class="content">
        <ul class="input-group">
            <li class="bottom-line">
                <div class="left">姓名</div>
                <div class="right">
                    <input id="name" type="text" placeholder="请输入姓名" maxlength="6" autocomplete="off"/>
                </div>
            </li>
            <li>
                <div class="left">身份证号码</div>
                <div class="right">
                    <input id="id" type="number" placeholder="请输入身份证号码" maxlength="18" autocomplete="off"/>
                </div>
            </li>
        </ul>
        <div class="title">上传证件照片</div>
        <div class="photo">
            <p class="p-title">身份证正反面照片</p>
            <div class="img"></div>
            <div class="up-btn">
                <input class="file" type="file" accept="image/jpg,image/png,image/jpeg"/>
                <button type="button">上传照片</button>
            </div>
        </div>
        <div class="photo">
            <p class="p-title">手持身份证照片</p>
            <div class="img"></div>
            <div class="up-btn">
                <input class="file" type="file" accept="image/jpg,image/png,image/jpeg"/>
                <button type="button">上传照片</button>
            </div>
        </div>
    </div>
    <footer>
        <div>
            <button type="button">提交认证</button>
        </div>
    </footer>
</body>
<script>
    function upfile(a){
        var file = $(a);
        file.on('change',function(){
            var fileType = file.val();
            var obj = $(this).parent().prev('.img');
            obj.html('加载中...');
            if(fileType.length > 1 && fileType ) {
                var ldot = fileType.lastIndexOf(".");
                var type = fileType.substring(ldot + 1);
//过滤其它格式的文件
                if(type == "jpg" || type == "png" || type == "jpeg"){
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(e) {
                        var imgUrl = e.target.result;
                        obj.css('background-image','url("'+imgUrl+'")').html('')
                    }
                }else{
//清空选择的非法文件
                    file.val('');
                    obj.css('background-image','url("")').html('');
                    setTimeout(function(){
                        alert("请上传图片类型为 jpg、png、jpeg的图片！")
                    },500);
                }
            }else{
                var isSelect = file.val();
                if(isSelect == "" || isSelect == null){
                    obj.css('background-image','url("")').html('');
                }
            }
        })
    }
    $(function(){
        upfile('.file');
    })
</script>
</html>